<script setup>
import DynamicTyping from '@/components/common/DynamicTyping.vue'
import { ref, inject, computed } from 'vue'
import { getSlogans } from '@/utils/chat'

import icon from '@/assets/svg/remote_design_team.svg'

const session = inject('session')
const drawerRef = inject('drawerRef')

const drawerOpen = computed(() => drawerRef.value?.isOpen ?? false)
const slogans = computed(() => getSlogans('unlimited'))

const showDrawer = () => {
  drawerRef.value?.open()
}
</script>

<template>
  <div>
    <div class="mt-32 w-[90%] mx-auto text-center">
      <span class="text-3xl">AI对话</span>
    </div>
    <div class="text-center mt-4" v-if="slogans.length > 0">
      <DynamicTyping :texts="slogans" />
    </div>
    <div class="w-[300px] text-center mx-auto mt-10">
      <img :src="icon" class="w-60 mx-auto" />
    </div>
    <div class="mt-10 w-[300px] mx-auto text-center">
      <el-button type="primary" size="large" v-if="true" @click="session.create">
        <template #icon><FontAwesomeIcon icon="plus" /></template>创建新对话
      </el-button>
      <el-button type="default" size="large" v-if="!drawerOpen" @click="showDrawer">
        <template #icon><FontAwesomeIcon icon="list" /></template>历史对话
      </el-button>
    </div>
  </div>
</template>
